<template>
    <div class="nav-bar">
        <div class="nav-bar__container">
            <router-link class="nav-bar__item"
                tag="div"
                :to="{
                    path: route.link
                }"
                @click="gotoLink(route.alink, route.link, route.id)"
                v-for="route in router"
                :key="route.link">
                <!-- <p class="nav-bar__item__icon"
                > -->
                    <i class="nav-bar__item__icon" :class="route.icon"></i>
                <!-- </p> -->
                <p class="nav-bar__item__text">
                    {{
                        route.text
                    }}
                </p>
            </router-link>
        </div>
    </div>
</template>

<script>
export default {
    name: 'FootCard',
    data () {
        return {
            router: [
                {
                    text: '首页',
                    link: '/',
                    icon: 'iconfont icon-home_icon',
                },
                {
                    text: '我也要制作',
                    link: 'javascript:void(0)',
                    icon: 'iconfont icon-circle-add-fill',
                },
                {
                    text: '我的',
                    link: '/UserCard',
                    icon: 'iconfont icon-wode1',
                },
            ]
        }
    },
    methods: {
        // gotoLink (url, link, id ) {
        //     if(link){
        //         this.isLogin(link,id)
        //     } else {
        //         window.location.href = url;
        //     }
                     
        // },
        // isLogin(url,id) {
        //     agentMemberController.isLogin().then((respData) => {
        //         if(id == 3) {
        //             if(respData){
        //                 url = '/wode/member';
        //             }else {
        //                 url = '/wode/orders';
        //             }
        //         }
        //         this.$router.push({
        //             path: url
        //         })
        //     }).catch(err=> {
        //         console.log(err);
        //     });
        // },
    },
}
</script>
<style lang="scss" scoped>
$color: #e50838;

    .nav-bar {
        position: absolute;
        bottom: 0;
        left: 0;
        width: 100%;
        &__container {
            border-top: 1px solid #d8d8d8;
            box-sizing: border-box;
            height: 1.1em;
            background-color: #fff;
            display: flex;
        }
        &__item {
            flex: 1;
            text-align: center;
            color: #999;
            line-height: 1;
            box-sizing: border-box;
            padding: .2rem .1rem 0 .1rem;
            &__icon {
                width: 0.48rem;
                height: 0.48rem;
                vertical-align: -0.15em;
                fill: currentColor;
                overflow: hidden;
                font-size: 0.48rem;
                color: #333;
                display: block;
                margin: 0 auto;
                &--active {
                    color: $color;
                }
            }
            .icon-circle-add-fill {
                font-size: 0.88rem;
                width: 1rem;
                height: 0.9rem;
                margin-top: -0.66rem;
                margin-bottom: 0.24rem;
                background-color: #fff;
                border-radius: 50px 50px 0 0;
                color: #e50838;
                border-top: 2px solid #d8d8d8;
            }
            &__text {
                font-size: .24rem;
                color: #333;
                &--active {
                    color: $color;
                }
            }
            &.router-link-exact-active {
                .nav-bar__item {
                    &__text,
                    &__icon {
                        color: $color;
                    }
                }
            }
        }
    }
</style>
